<template>
    <div>
        <el-card>
            <div slot="header">
                <span>异常设备信息</span>
                <div class="fl-r">告警打印</div>
            </div>
           <el-table
            :data="tableData"
            stripe
            style="width: 100%">
                <el-table-column
                prop="categoryName"
                label="设备分类"
                width="180">
                </el-table-column>
                <el-table-column
                label="设备完好率"
                width="180">
                    <template slot-scope="scope">
                        {{( scope.row.count - scope.row.faultCount) /scope.row.count | formatPercent}}
                    </template>
                </el-table-column>
                <el-table-column
                prop="count"
                label="设备总数">
                </el-table-column>
                <el-table-column
                prop="faultCount"
                label="异常设备数量">
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script>

import reportService from '../../../services/reportService'

export default {

    data(){
        return {
            tableData: []
        }
    },

    mounted(){
        let _this = this
        reportService.getfaultEquipInfo().then(res => {
            if (res.msg == 'success') {
                _this.tableData = res.data.faultGroupByCategoryCode
            }
        })
    }
}
</script>
<style lang="scss" scoped>

.fl-r{
    float: right;
}

.content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.content-item{
    text-align: center;
}
</style>
